<template>
  <div class="inline">

    <el-button v-if="showChannel" class="filter-item" type="primary" @click="selectChannel">发行渠道({{ channelSelect }})</el-button>
    <el-button v-if="showChannel" class="filter-item" type="primary" @click="selectPfChannel">渠道({{ pfchannelSelect }})</el-button>
    <el-button class="filter-item" type="success" @click="selectServer">服务器({{ serverSelect }})</el-button>
    <el-select v-model="searchForm.status" clearable class="filter-item" style="width: 120px;" placeholder="订单类型">
      <el-option
        v-for="(item, index) in statusList"
        :key="index"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <el-input v-model="searchForm.amount[0]" class="filter-item" style="width: 90px;" placeholder="区间金额" />-
    <el-input v-model="searchForm.amount[1]" class="filter-item" style="width: 90px;" placeholder="区间金额" />
    <el-input v-model="searchForm.value" class="filter-item" style="width: 160px;" placeholder="角色ID/账号/订单号" />
    <el-button class="filter-item" type="warning" @click="selectRecharge">充值档位({{ rechargeSelect }})</el-button>
    <el-date-picker v-model="searchForm.startDate" class="filter-item" type="date" style="width: 140px;" placeholder="开始时间"></el-date-picker>-
    <el-date-picker v-model="searchForm.endDate" class="filter-item" type="date" style="width: 140px;" placeholder="结束时间"></el-date-picker>
    <el-button class="filter-item" type="primary" plain icon="el-icon-search" @click="handleFilter">搜索</el-button>
    <span class="filter-item"></span>
    <el-dialog :visible.sync="dialogVisible" :title="textMap[dialogType]" :close-on-click-modal="false">
      <el-checkbox v-show="isVisible" v-model="allServerChecked" @change="checkAllServer">显示全服</el-checkbox>
      <div class="server-box">
        <ul class="menu-sub">
          <li
            v-for="(sgit,index) in groupList"
            :key="index"
          >
            <el-checkbox
              v-model="sgit.flag"
              :indeterminate="itemIndeterminate(sgit)"
              @change="(val) => handleCheckAll(val, sgit)"
            >{{ sgit.sgname }}</el-checkbox>
            <el-checkbox-group
              v-model="selectedData"
              style="padding-left: 30px;"
              @change="handleChanges(sgit)"
            >
              <el-checkbox
                v-for="sgits in sgit.children"
                :key="sgits.sid"
                :label="sgits.sid"
              >{{ sgits.name }}</el-checkbox>
            </el-checkbox-group>
          </li>
        </ul>
      </div>
      <div class="tr">
        <el-button type="primary" @click="confirmSubmit()">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getServerListGroup, getChannelPackageListGroup, getAllChannelList } from '@/api/ops'
import { getConfigRechargeGroupList } from '@/api/statis'

export default {
  props: {
    showChannel: { type: Boolean, default: true },
    startDate: { type: Date, default: new Date() },
    endDate: { type: Date, default: new Date() }
  },
  data() {
    return {
      loading: false,
      searchForm: {
        cpids: [],
        cids: [],
        servers: [],
        startDate: new Date(),
        endDate: new Date(),
        amount: [],
        recharges: [],
        status: ''
      },
      channelSelect: '全部',
      pfchannelSelect: '全部',
      serverSelect: '全部',
      rechargeSelect: '全部',
      isVisible: false,
      keywordList: [],
      allServerChecked: false,
      selectedData: [],
      channelSelectedData: [],
      pfchannelSelectedData: [],
      serverSelectedData: [],
      rechargeSelectedData: [],
      groupList: [],
      dialogVisible: false,
      dialogType: 'channel',
      textMap: {
        channel: '选择发行渠道',
        pfchannel: '选择渠道',
        server: '选择服务器',
        recharge: '选择充值档位'
      },
      statusList: [
        { value: 0, label: '未支付' },
        { value: 1, label: '已到账' },
        { value: 2, label: '未到账' },
        { value: -1, label: '异常订单' }
      ]
    }
  },
  created() {
    this.searchForm.startDate = this.startDate
    this.searchForm.endDate = this.endDate
  },
  methods: {
    handleFilter() {
      this.$emit('transferFilter', this.searchForm)
    },
    selectChannel() {
      this.dialogType = 'channel'
      this.dialogVisible = true
      this.isVisible = false
      this.selectedData = this.channelSelectedData
      this.channelPackageListGroup(false)
    },
    selectPfChannel() {
      this.dialogType = 'pfchannel'
      this.dialogVisible = true
      this.isVisible = false
      this.selectedData = this.channelSelectedData
      this.getAllChannelList(false)
    },
    selectServer() {
      this.dialogType = 'server'
      this.dialogVisible = true
      this.isVisible = true
      this.selectedData = this.serverSelectedData
      this.serverListGroup(false)
    },
    selectRecharge() {
      this.dialogType = 'recharge'
      this.dialogVisible = true
      this.isVisible = false
      this.selectedData = this.rechargeSelectedData
      this.rechargeListGroup()
    },

    confirmSubmit() {
      if (this.dialogType === 'server') {
        this.serverSelectedData = this.selectedData
        this.searchForm.servers = this.selectedData
        if (this.selectedData.length > 0) this.serverSelect = '已选择'
      }
      if (this.dialogType === 'channel') {
        this.channelSelectedData = this.selectedData
        this.searchForm.cpids = this.selectedData
        if (this.selectedData.length > 0) this.channelSelect = '已选择'
      }
      if (this.dialogType === 'pfchannel') {
        this.pfchannelSelectedData = this.selectedData
        this.searchForm.cids = this.selectedData
        if (this.selectedData.length > 0) this.pfchannelSelect = '已选择'
      }
      if (this.dialogType === 'recharge') {
        this.rechargeSelectedData = this.selectedData
        this.searchForm.recharges = this.selectedData
        if (this.selectedData.length > 0) this.rechargeSelect = '已选择'
      }
      this.dialogVisible = false
    },

    async serverListGroup(val) {
      getServerListGroup({ all: val }).then(res => {
        this.groupList = res.data
      })
    },

    async channelPackageListGroup(val) {
      getChannelPackageListGroup({ all: val }).then(res => {
        this.groupList = res.data
      })
    },
    async getAllChannelList(val) {
      getAllChannelList({ all: val }).then(res => {
        this.groupList = res.data
      })
    },
    async rechargeListGroup(val) {
      getConfigRechargeGroupList().then(res => {
        this.groupList = res.data
      })
    },
    // 全选
    handleCheckAll(val, item) {
      // 过滤掉没有选中的数据，item.child中不包含v时返回-1
      const next = item.children.map(item => item.sid)
      const filterArr = this.selectedData.filter(
        (v) => next.indexOf(v) === -1
      )
      this.selectedData = val ? filterArr.concat(next) : filterArr
    },
    itemIndeterminate(item) {
      const infoLists = item.children.map(ite => ite.sid)
      return (
        infoLists.some((v) => this.selectedData.indexOf(v) > -1) &&
        !infoLists.every((v) => this.selectedData.indexOf(v) > -1)
      )
    },
    // 勾选变化方法
    handleChanges(val) {
      const infoLists = val.children.map(ite => ite.sid)
      infoLists.every((v) => {
        if (this.selectedData.indexOf(v) > -1) {
          val.flag = true
        } else {
          val.flag = false
        }
      })
    },
    checkAllServer() {
      this.serverListGroup(this.allServerChecked)
    }
  }
}
</script>
